<template>
  <div>
    <div class="headertop">
      <div class="header">
        <span class="iconfont iconjiantou" @click="$router.back()"> </span>
        <!-- 搜索 -->
        <van-search
          v-model="key"
          placeholder="请输入搜索关键词"
          shape="round"
        />
        <span @click="search">搜索</span>
      </div>
    </div>
    <div class="box"></div>
    <div class="content">
      <div class="history">
        <div>
          <span>搜索历史</span
          ><span class="del" @click="delhistory">删除历史</span>
        </div>
        <span v-for="v in historyarr" :key="v" @click="clicksearch(v)">{{
          v
        }}</span>
      </div>
      <div class="result">
        <div>相关搜索内容</div>
        <p v-for="v in arr" :key="v.id" class="list" @click="jump(v.id)">
          {{ v.title }}
        </p>
        <p v-if="!arr[0]" class="hint">没有相关搜索内容</p>
      </div>
    </div>
  </div>
</template>

<script>
import { tosearch } from "@/apis/postlists.js";
export default {
  data() {
    return {
      key: "",
      arr: [],
      historyarr: [],
    };
  },
  methods: {
    //页面跳转
    jump(id) {
      this.$router.push({ path: "/articaldetail/" + id });
    },
    // 历史中搜索
    clicksearch(v) {
      this.key = v;
      this.search();
    },
    // 搜索框搜索
    async search() {
      if (this.key.trim().length == 0) {
        this.$toast.fail("请输入搜索关键字");
      } else {
        let res = await tosearch(this.key);
        this.arr = res.data.data;
        // 判断historyarr数组中是否已经存在该关键字
        let has = this.historyarr.indexOf(this.key);
        if (has != -1) {
          //有便删除
          this.historyarr.splice(has, 1);
        }
        // 将新的搜索关键字添加到历史数组中并存储到本地储备
        this.historyarr.unshift(this.key);
        localStorage.setItem("keyword", JSON.stringify(this.historyarr));
      }
    },
    // 删除搜索历史
    delhistory() {
      localStorage.removeItem("keyword");
      //刷新页面
      this.$router.go(0);
    },
  },
  mounted() {
    this.historyarr = JSON.parse(localStorage.getItem("keyword")) || [];
  },
};
</script>

<style lang="less" scoped>
.hint {
  text-align: center;
  display: block;
  font-size: 14px;
  margin: 20px 10px;
  color: #ccc;
}
.headertop {
  width: 100%;
  position: fixed;

  .header {
    height: 45px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    background: rgb(238, 50, 50);
    .van-search {
      background: rgb(238, 50, 50);
      padding: 5px 12px;
    }
  }

  .van-icon {
    color: red;
    font-size: 25px;
  }
  .toback {
    position: relative;
  }
  .iconnew {
    margin-left: 20px;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: 15px;
  }
}
.box {
  height: 45px;
}
.content {
  // background: #000;
  height: 500px;
  .history {
    padding: 20px;
    // height: 100px;
    border-bottom: 1px solid #ccc;
    div {
      font-size: 18px;
      display: flex;
      justify-content: space-between;
      .del {
        display: inline-block;
        margin-top: 10px;
        padding: 0 10px;
        background: #eee;
        height: 20px;
        line-height: 20px;
        border-radius: 10px;
        font-size: 14px;
      }
    }
    > span {
      display: inline-block;
      margin: 10px;
      padding: 0 10px;
      background: #eee;
      height: 20px;
      line-height: 20px;
      border-radius: 10px;
      color: #888;
      font-size: 14px;
    }
  }
  .result {
    padding: 20px;
    // height: 100px;
    div {
      font-size: 18px;
    }
    .list {
      margin-top: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 10px;
      background: #eee;
      height: 25px;
      line-height: 25px;
      border-radius: 10px;
      font-size: 18px;
      text-decoration: underline; //下划线
    }
  }
}
</style>